<!DOCTYPE html>
<html lang='zh-cmn-Hans'>
<header>
<meta charset='utf-8'/>
<title>Javascript Lab</title>
<style>
html, body {
    background-color: transparent;
}
body {
	padding: 0;
	margin: 0;
}
#log {
	box-sizing: border-box;
	padding: 4px;
}
#log > p {
	padding: 0;
	margin: 0;
	color: white;
}
</style>
</header>
<body>
<div id='log'></div>
<script>
function Log(id) {
    const INFO = 1;
    const DEBUG = 2;
    const WARN = 3;
    const ERROR = 4;
    var element;

    if (document) {
        element = document.getElementById(id);
    }

    this.i = function (msg) {
        if (element) print(INFO, msg);
        else console.info(msg);
    };

    this.w = function (msg) {
        if (element) print(WARN, msg);
        else console.warn(msg);
    };

    this.e = function (msg) {
        if (element) print(ERROR, msg);
        else console.error(msg);
    };

    this.d = function (msg) {
        if (element) print(DEBUG, msg);
        else console.debug(msg);
    };

    function print(level, msg) {
        var row = document.createElement('p');
        switch (level) {
            case DEBUG: row.style.color = 'blue'; break;
            case WARN: row.style.color = 'yellow'; break;
            case ERROR: row.style.color = 'red'; break;
            default: row.style.color = 'black'; break;
        }
        row.innerText = msg;
        element.appendChild(row);
    }
}

/**
 * 通过原型继承创建一个新对象
 * proto
 */
function inherit(proto) {
	if (proto == null || proto == undefined)
		throw TypeError('param(:proto) must not null or not undefined');
	var type = typeof proto;
	if (type !== 'object' && type !== 'function')
		throw TypeError('the type of proto must object or function');
	function constructor() {};
	constructor.prototype = proto;
	return new constructor();
}
</script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>